<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/ " style="margin-bottom: 15px">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="addData" ref="addForm">
      <el-form-item label="商品名称:" label-width="100px" prop="name">
        <el-input
          v-model="addData.name"
          placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品类别:" label-width="100px" prop="type">
        <el-select v-model="addData.type" filterable placeholder="请选择" @change="val=>this.addData.type=val">
          <el-option
            v-for="(item,index) in typeList"
            :key="index"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品价格:" label-width="100px" prop="price">
        <el-input
          v-model="addData.price"
          placeholder="请输入商品价格"></el-input>
      </el-form-item>
      <el-form-item label="商品库存:" label-width="100px" prop="num">
        <el-input
          v-model="addData.num"
          placeholder="请输入商品库存"></el-input>
      </el-form-item>
      <el-form-item label="商品图片:" label-width="100px">
        <input type="file" ref="images">
      </el-form-item>
      <el-form-item label="商品说明:" label-width="100px" prop="desc">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="addData.desc">
        </el-input>
      </el-form-item>
    </el-form>
    <el-row :gutter="20" style="margin: 0 auto;text-align: center">
      <el-col>
        <el-button type="primary" @click="com">提交</el-button>
        <el-button @click="res">重置</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'shopAdd',
  data () {
    return {
      addData: {},
      typeList: []
    }
  },
  created () {
    this.getTypeAll()
  },
  methods: {
    // 获取所有下拉列表值
    async getTypeAll () {
      const { data: res } = await axios.get('/getTypeAll')
      if (res.status === 200) {
        this.typeList = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    // 重置
    res () {
      this.$refs.addForm.resetFields()
    },
    // 提交
    com () {
      console.log(this.$refs.images.files[0])
      const formData = new FormData()
      formData.append('name', this.addData.name)
      formData.append('type', this.addData.type)
      formData.append('price', this.addData.price)
      formData.append('num', this.addData.num)
      formData.append('desc', this.addData.desc)
      formData.append('image', this.$refs.images.files[0])
      axios({
        method: 'POST',
        url: '/addGoods',
        data: formData,
        headers: {
          'content-type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data.status === 200) {
          this.$message.success(res.data.message)
          this.addData = {}
          this.$router.go(0)
          return false
        }
        this.$message.error(res.data.message)
      }).catch(err => {
        this.$message.error('服务器未响应')
      })
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 80%;
}

</style>
